<!DOCTYPE html>
<html>
<head>
<link
	href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
	rel="stylesheet" type="text/css" />

<link rel="icon" type="image/png" href="/images/epoolSmall.png" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.4/themes/eggplant/jquery-ui.css" />

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script
	src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script type="text/javascript" src="/js/icons.js"></script>

<style>
#map-canvas {
	width: 800px;
	height: 700px;
}

body {
	font-family: arial; /* Font */
	font-size: 12px; /* Font Size */
}
</style>

<script>
	var geocoder;
	var map;
	var infowindow = new google.maps.InfoWindow();

	var threats = [];
	var places = [];
	var address_position = 0;

	function initialize() {

		geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(53.37674, -1.468016);
		var myOptions = {
			zoom : 6,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.SATELLITE
		}
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);

		jQuery.getJSON('/csv4.groovy', function(data) {

			console.log("data: " + data);

			jQuery.each(data, function(key, val) {
				var id = val.id;
				var categories = val.categories;
				var lat = val.lat;
				var lng = val.lng;
				var drugreference = val.drugreference;
				var businessofinterest = val.businessofinterest;
				var humantrafficking = val.humantrafficking;

				var OCLatlng = new google.maps.LatLng(lat, lng);

				console.log("key is " + key + " lat is : " + lat + " lng is "
						+ lng);

				if (humantrafficking == 'THB') {
					threatImage = thbImage;
				} else if (businessofinterest == 'nailbar') {
					threatImage = nailImage
				} else if (drugreference == 'cannabis') {
					threatImage = cannabisImage
				} else
					threatImage = drugsImage;

				console.log(" Drug reference: " + drugreference
						+ " businessofinterestet " + businessofinterest);

				var infoString = '<p style="color:blue;"> Business: '
						+ businessofinterest + '</p>'
						+ '<p style="color:green;"> Drug reference: '
						+ drugreference + '</p>'
						+ '<p style="color:red;"> human trafficking: '
						+ humantrafficking + '</p>';

				var infowindow = new google.maps.InfoWindow({
					content : infoString
				});

				var titleString = 'Categories:' + categories;

				var marker2 = new google.maps.Marker({
					position : OCLatlng,
					map : map,
					icon : threatImage,
					title : titleString
				});

				google.maps.event.addListener(marker2, 'click', function() {
					infowindow.open(map, marker2);
				});
			});
		});
	}
</script>

</head>
<body onload="initialize()">
	<h1>Organised Crime Visual Alarm Tool</h1>
	<p>OC threats from CSV analysis</p>

	<div id="map_canvas" style="height: 90%; border: 1px solid black;"></div>
</body>
</html>